<template>
  <div id="love_transfer">
    <c-title :hide="false" :text="setPageTitle"></c-title>
    <!-- 优化 -->
    <diyBackGround></diyBackGround>
    <div class="nowPrice">
      <div class="priceIs">{{ setPriceIs }}：{{ usable }}</div>
      <div class="main">
        <div class="balanceTxt">{{ isTransformLoveV ? love_name : `转化${balanceLang}` }}</div>
        <div class="contenBox">
          <div class="left">
            <div class="image">
              <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images/balance/zuanshi@2x.png" alt="" />
            </div>
            <input type="number" v-model="sell_value" placeholder="0.00" />
          </div>
          <div class="contenTxt" @click="allConversion">{{ contenTxt }}</div>
        </div>
        <div class="tips" v-if="!isTransformLoveV">例如：100个{{ balanceLang }}可以转化{{ Math.floor(((100 * rate) / 100) * 100) / 100 }}个{{ love_name }}</div>
        <div class="btn" @click="saleBalance">{{tips_C}}</div>
        <div class="tips" v-if="isTransformLoveV && this.$route.name != 'YccformFrozenLove'">
          注：交易手续费收取{{ poundage }}%，<br />
          交易限制(最小额度){{ trading_limit }}，<br />
          交易限制(倍数) {{ trading_fold }}，<br />
          只有 {{ trading_fold }} 或 {{ trading_fold }} 的倍数是可以交易。<br />
          {{ fun.isTextEmpty(trading_fetter) ? "" : `出售限制${trading_fetter}` }}
        </div>
        <div class="tips" v-if="!isTransformLoveV && this.$route.name != 'YccformFrozenLove'">
          注：转化比例为{{ rate }}%，<br />
          您实际转账到数为：{{ Math.floor(((sell_value * rate) / 100) * 100) / 100 }}
        </div>
        <div class="tips" v-if="this.$route.name == 'YccformFrozenLove'">
          转化比例1:{{Number(rate)}} <span v-if="sell_value">，可转化{{ (sell_value * Number(rate)).tofixed(2) }}{{froze_love_name}}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import love_trading_sell_controller from "./love_trading_sell_controller";

export default love_trading_sell_controller;
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
#love_transfer {
  .nowPrice {
    text-align: left;
    margin: 0 0.625rem;
    margin-top: -5.5938rem;

    .priceIs {
      font-size: 0.875rem;
      font-weight: 400;
      color: #333;
      margin-bottom: 0.9375rem;
    }

    .main {
      background: #fff;
      box-shadow: 0 0.0625rem 0.25rem 0 rgba(7, 11, 33, 0.11);
      border-radius: 0.3125rem;
      padding: 1.25rem 1.25rem 1.0313rem 1.25rem;

      .btn {
        margin: 0 auto;
        width: 85%;
        height: 2.4375rem;
        background: #f25354;
        border-radius: 0.375rem;
        font-size: 0.9688rem;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        margin-top: 3.2188rem;
      }

      .tips {
        font-size: 0.7188rem;
        font-weight: 400;
        color: #888;
        margin-top: 0.75rem;
        text-align: left;
      }

      .contenBox {
        display: flex;
        margin-top: 1.8125rem;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 0.9688rem;
        border-bottom: 1px solid #ffe7e7e7;

        .left {
          display: flex;
          align-items: center;

          input {
            width: 100%;
            border: none;
            font-weight: 400;
            font-size: 1.5938rem;
          }

          .image {
            width: 1.4063rem;
            height: 1.2813rem;
            margin-right: 1.3438rem;

            img {
              width: 100%;
              height: 100%;
            }
          }
        }

        .contenTxt {
          font-size: 0.75rem;
          font-weight: 400;
          color: #f15353;
          white-space: nowrap;
        }
      }
    }
  }
  // .content {
  //   padding-bottom: 5rem;

  //   .transfer_info {
  //     background: #fff;
  //     padding-left: 0.875rem;
  //     font-size: 16px;

  //     .info_a,
  //     .info_b {
  //       line-height: 2.875rem;
  //       border-bottom: solid 0.0625rem #ebebeb;
  //       display: flex;
  //       justify-content: flex-start;

  //       span:first-child {
  //         max-width: 10rem;

  //         /* width: 6.875rem; */
  //         display: block;
  //         text-align: left;
  //       }

  //       input {
  //         border: none;
  //         width: 15.625rem;
  //       }
  //     }
  //   }

  //   .transfer_sum {
  //     background: #fff;
  //     padding: 0.625rem 0.875rem;

  //     span {
  //       display: block;
  //       font-size: 16px;
  //       line-height: 2.5rem;
  //       text-align: left;
  //     }

  //     .sum {
  //       text-align: left;
  //       font-size: 24px;

  //       input {
  //         margin-left: 0.375rem;
  //         line-height: 3.75rem;
  //         width: 90%;
  //         font-size: 36px;
  //         border: none;
  //       }
  //     }

  //     p {
  //       border-top: solid 0.0625rem #ebebeb;
  //       line-height: 2.25rem;
  //       color: #8c8c8c;
  //       text-align: left;
  //       font-size: 14px;
  //     }
  //   }

  //   .info_b {
  //     background: #fff;
  //     padding-left: 0.875rem;
  //     font-size: 14px;
  //     line-height: 2.875rem;
  //     border-top: solid 0.0625rem #ebebeb;
  //     font-weight: 400;
  //     text-align: left;
  //     color: #7d7e80;
  //   }

  //   .btn {
  //     width: 21.5625rem;
  //     margin: 1.25rem auto;
  //     height: 2.875rem;
  //     border-radius: 0.25rem;
  //     font-size: 16px;
  //     color: #fff;
  //     background: #f15353;
  //     border: none;
  //   }
  // }

  // button {
  //   width: 90%;
  //   margin: 1.25rem;
  //   height: 2.875rem;
  //   font-size: 16px;
  // }

  // i {
  //   font-size: 4.375rem;
  //   color: #f15353;
  // }

  // .my-banlance {
  //   margin: 1.25rem 0;
  //   font-size: 14px;
  //   color: #333;
  //   line-height: 1.875rem;
  // }

  // .my-banlance span {
  //   font-size: 14px;
  //   color: #333;
  //   margin-top: 0.625rem;
  // }

  // .my-banlance span b {
  //   font-size: 28px;
  // }

  // .notes {
  //   color: #8c8c8c;
  //   line-height: 1.25rem;
  // }

  // .transfer {
  //   display: inline-block;
  //   height: 2.875rem;
  //   width: 90%;
  //   margin: 1rem 0.9375rem;
  //   color: #fff;
  //   background-color: #13ce66;
  //   border-color: #13ce66;
  //   border-radius: 4px;

  //   span {
  //     line-height: 2.875rem;
  //   }
  // }
}
</style>
